import { Button, Input, NavBar,Tabs,CalendarPicker  } from 'antd-mobile'
import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { NavLink, useNavigate } from 'react-router-dom';
import { setDate, setEnd, setStart } from '../../store/list/listSlice';

function Home() {
    const dispatch=useDispatch();
    const navigate=useNavigate();
    const [visible, setVisible] = useState(false)
    const city=useSelector(state=>state.city.city);
    const {start,end,date}=useSelector(state=>state.list)
    const handleJx=()=>{
        dispatch(setStart(end))
        dispatch(setEnd(start))
    }
  return (
    <div>
      <NavBar left={<NavLink to='/city'>{city}</NavLink>} backIcon={false}>首页</NavBar>
      <div>
        <Tabs>
          <Tabs.Tab title='汽车票' key='fruits'>
            汽车票
          </Tabs.Tab>
          <Tabs.Tab title='船票' key='vegetables'>
            <div>
                <div style={{display:"flex"}}>
                    <Input style={{borderBottom:"1px solid #ccc"}} value={start} placeholder='开始目的'></Input>
                    <div style={{marginLeft:"20px", textAlign:"center"}} onClick={()=>handleJx()}>《==》</div>
                    <Input style={{marginLeft:"20px",borderBottom:"1px solid #ccc"}} value={end} placeholder='结束目的'></Input>
                </div>
                <div>
                    <Input style={{borderBottom:"1px solid #ccc",marginTop:"10px"}} value={date} placeholder='日期' onClick={()=>setVisible(true)}></Input>
                    <Button style={{marginTop:"20px"}} block color="primary" onClick={()=>navigate('/tick')}>查询</Button>
                </div>
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
      <CalendarPicker
          visible={visible}
          onClose={() => setVisible(false)}
          onConfirm={(date)=>{
            setVisible(false)
            const timer=new Date(date).toLocaleDateString()
            dispatch(setDate(timer))
          }}
        />
    </div>
  )
}

export default Home
